import  React, { Component } from 'react';
import { DetailWarpper,DetailTitle,Article } from './style';
import { actionCreaters } from './store';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
class Detail extends Component{
    render(){
        return(
            <DetailWarpper>
                <DetailTitle>
                    {this.props.article.get('title')}
                    <Article dangerouslySetInnerHTML={{__html : this.props.article.get('articleHtml')}} /> 
                </DetailTitle>
            </DetailWarpper>
        )
    }
    componentDidMount() { 
        console.log(this.props.match.params.id)
        const id=this.props.match.params.id;
        this.props.getData(id)
    }
};

const mapStateToProps=(state)=>{
    return{
        //immutabled对象的get方法
        article:state.getIn(['detail','acticle']),
    }
};
const mapDispatchToProps=(dispatch)=>{
    return{
        getData(id){
            dispatch(actionCreaters.getDetailInfo(id))
        }
    }
};
//使用了异步组件加载，要使用withRouter来获取到路由中的信息
export default connect(mapStateToProps,mapDispatchToProps)(withRouter(Detail));
